import React, { useState, useEffect } from 'react'
import { Layout, Menu, theme } from 'antd';
import NewRouter from "../components/sandbox/newRouter/NewRouter"
import {
  AlignCenterOutlined,
} from '@ant-design/icons';
import './NewSandBox.css'
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
const { Header, Content, Sider } = Layout;
function NewsSandBox(props) {
  const [height, setHeight] = useState(0);
  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    setHeight(h);
  };


  const [pathUrl, setPathUrl] = useState(props.location.pathname === "/" ? "/app" : props.location.pathname)
  useEffect(() => {
    var path = props.location.pathname.split('/').slice(1);
    if (path[0] === "app") {
      setPathUrl("/" + path[0])
    } else {
      setPathUrl(props.location.pathname)
    }
    if (path[0] == "") {
      setPathUrl("/app")
    }
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    setHeight(h)

    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }

  }, []);
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [
    getItem('工业APP', '/app', <AlignCenterOutlined />),
    getItem('APP运行日志', '/log', <AlignCenterOutlined />),

    // getItem('工业APP', '/app', <AlignCenterOutlined />, [
    //   getItem('设备管理', '/app/devmanage', <AlignCenterOutlined />),
    //   getItem('生产管理', '/app/promanage', <AlignCenterOutlined />),
    //   getItem('运营管理', '/app/opemanage', <AlignCenterOutlined />),
    // ]),
    getItem('标识解析', '/identity', <AlignCenterOutlined />, [
      getItem('数据采集', '/identity/data', <AlignCenterOutlined />),
    ]),

  ];
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const menuClick = (e) => {
    props.history.push(e.key)
    setPathUrl(e.key)
  }
  return (

    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider style={{ backgroundColor: "black", textAlign: "left" }}>
        <div style={{ padding: "15px 0", color: "white", textAlign: "center", fontSize: "22px" }} >
          工业互联网平台
        </div>
        <Menu theme="dark" selectedKeys={pathUrl} mode="inline" items={items} onClick={(e) => menuClick(e)} style={{ backgroundColor: "black", fontSize: "12px", }} />
      </Sider>
      <Layout style={{ background: "#f5f4f4" }}>

        <Content style={{ position: 'relative' }}>
          <div
            style={{
              // padding: "0 0 20px 0",
              // background: colorBgContainer,
              borderRadius: "5px",
              // height: document.documentElement.clientHeight - 140,
              margin: '15px 15px 0 15px',
            }}
          >
            <NewRouter />
          </div>
        </Content>

      </Layout>
    </Layout >
  )
}
export default withRouter(NewsSandBox)